<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/animationtest.css">
    <link rel="stylesheet" href="css/makaElementEffect.v2.css">
    <link rel="stylesheet" href="css/animationOnAndOut.v1.css">
    <script type="text/javascript" src="js/jquery-3.4.1.js"></script>
    <script type="text/javascript" src="js/animationtest.js"></script>
    <title>animationtest</title>
</head>
<body>
    <header>自己写的预览第三方动画效果的页面，和漫无目的整理笔记比起来，我还是觉得有时间多做练习在练习中发现自己的不足之处或者有针对性的刷简答</header>
    <div class="content">
        <select>
            <option value="scaleUp">scaleUp</option>
            <option value="scaleDown">scaleDown</option>
            <option value="swingX">swingX</option>
            <option value="swingY">swingY</option>
            <option value="rotateWise">rotateWise</option>
            <option value="rotateAntiWise">rotateAntiWise</option>
            <option value="fade">fade</option>
            <option value="fadeOut">fadeOut</option>
            <option value="fadeOutUp">fadeOutUp</option>
            <option value="fadeOutDown">fadeOutDown</option>
            <option value="fadeOutLeft">fadeOutLeft</option>
            <option value="fadeOutRight">fadeOutRight</option>
            <option value="rotateOutUpLeft">rotateOutUpLeft</option>
            <option value="rotateOutUpRight">rotateOutUpRight</option>
            <option value="slideOutLeft">slideOutLeft</option>
            <option value="slideOutRight">slideOutRight</option>
            <option value="slideOutUp">slideOutUp</option>
            <!-- 以下css动画在makaElementEffect中 -->
            <option value="zoomIn">zoomIn</option>
            <option value="zoomInDown">zoomInDown</option>
            <option value="expandOpen">expandOpen</option>
            <option value="fadeIn">fadeIn</option>
            <option value="fadeInUp">fadeInUp</option>
            <option value="fadeInRight">fadeInRight</option>
            <option value="fadeInLeft">fadeInLeft</option>
            <option value="fadeInDown">fadeInDown</option>
            <option value="moveDown">moveDown</option>
            <option value="moveUp">moveUp</option>
            <option value="moveLeft">moveLeft</option>
            <option value="moveRight">moveRight</option>
            <option value="rotateIn">rotateIn</option>
            <option value="rotateInDownLeft">rotateInDownLeft</option>
            <option value="rotateInDownRight">rotateInDownRight</option>
            <option value="flipInY">flipInY</option>
            <option value="flipInX">flipInX</option>
            <option value="lightSpeedIn">lightSpeedIn</option>
            <option value="slideDown">slideDown</option>
            <option value="slideUp">slideUp</option>
            <option value="slideLeft">slideLeft</option>
            <option value="slideRight">slideRight</option>
            <option value="pullUp">pullUp</option>
            <option value="pullDown">pullDown</option>
            <option value="stretchLeft">stretchLeft</option>
            <option value="stretchRight">stretchRight</option>
        </select>                  
        <div id="test">点击图形测试播放所选择的动画效果</div>
    </div>
</body>
</html>